<template>
	<div class="search-result-page">
		<!-- 搜索框（固定在顶部） -->
		<div class="search-fixed">
			<div class="search-input-box">
				<i class="fa fa-search"></i>
				<input 
					type="text" 
					v-model="searchKeyword" 
					placeholder="搜索饿了么商家、商品名称"
					@keyup.enter="handleSearch"
					autofocus
				>
				<button v-if="searchKeyword" class="clear-btn" @click="clearSearch">×</button>
				<button class="search-btn" @click="handleSearch">搜索</button>
			</div>
		</div>
		<!-- 搜索结果提示 -->
		<div class="search-result-tip" v-if="showResultTip">
			<span>找到 {{ businesses.length }} 家店铺</span>
		</div>
		<!-- 排序方式 -->
		<div class="sort-container">
			<ul class="sort-type">
				<li :class="{active: sortType === 0}" @click="changeSortType(0)">综合排序<i class="fa fa-caret-down"></i></li>
				<li :class="{active: sortType === 1}" @click="changeSortType(1)">距离最近</li>
				<li :class="{active: sortType === 2}" @click="changeSortType(2)">销量最高</li>
				<li :class="{active: sortType === 3}" @click="changeSortType(3)">筛选<i class="fa fa-filter"></i></li>
			</ul>
		</div>
		<!-- 商家列表 -->
		<div class="business-list-container">
			<ul class="business-list">
				<!-- 加载状态 -->
				<div v-if="loading" class="loading">
					<div class="spinner"></div>
					<p>搜索中...</p>
				</div>
				
				<!-- 无结果状态 -->
				<div v-else-if="businesses.length === 0 && !loading" class="no-result">
					<div class="no-result-icon">
						<i class="fa fa-search"></i>
					</div>
					<p>没有找到相关店铺</p>
					<button @click="goBack">返回首页</button>
				</div>
				
				<!-- 商家列表 -->
				<li v-else v-for="business in businesses" :key="business.id" @click="goToBusinessDetail(business.id)">
					<div class="business-image">
						<img :src="business.businessImg || '../assets/sj01.png'" :alt="business.businessName">
						<div class="business-tag">蜂鸟专送</div>
					</div>
					<div class="business-info">
						<div class="business-header">
							<h3>{{ business.businessName }}</h3>
							<div class="like-icon">
								<i class="fa fa-heart-o"></i>
							</div>
						</div>
						<div class="rating-info">
							<div class="stars">
								<i class="fa fa-star" v-for="n in 5" :key="n"></i>
								<span class="rating-text">4.9</span>
								<span class="sales-text">月售345单</span>
							</div>
						</div>
						<div class="delivery-info">
							<span>&#165;{{ business.startPrice }}起送</span>
							<span class="divider">|</span>
							<span>&#165;{{ business.deliveryPrice }}配送</span>
							<span class="divider">|</span>
							<span>3.22km</span>
							<span class="divider">|</span>
							<span>30分钟</span>
						</div>
						<div class="business-tags">
							<span class="tag">{{ business.businessExplain || '餐饮美食' }}</span>
						</div>
						<div class="promotion-info">
							<div class="promotion-badge">新</div>
							<p class="promotion-text">饿了么新用户首单立减9元</p>
							<div class="promotion-more">
								<span>2个活动</span>
								<i class="fa fa-angle-down"></i>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<!-- 底部菜单 -->
		<div class="wrapper">
		  <Footer></Footer>
		</div>
	</div>
</template>
<script>
	import Footer from '../components/Footer.vue';
	import axios from 'axios';
	
	export default {
		name: 'SearchResult',
		data() {
			return {
				businesses: [], // 搜索结果商家列表
				searchKeyword: '', // 搜索关键词
				loading: false, // 加载状态
				showResultTip: false, // 显示结果提示
				sortType: 0 // 排序类型
			}
		},
		created() {
			// 从路由参数获取关键词并执行搜索
			const keyword = this.$route.query.keyword;
			if (keyword) {
				this.searchKeyword = keyword;
				this.fetchSearchResult();
			}
		},
		components: {
			Footer
		},
		methods: {
			// 执行搜索
			handleSearch() {
				if (!this.searchKeyword.trim()) return;
				document.activeElement.blur();
				this.fetchSearchResult();
				// 更新路由参数
				this.$router.push({
					path: '/searchResult',
					query: { keyword: this.searchKeyword.trim() }
				});
			},
			
			// 清除搜索关键词
			clearSearch() {
				this.searchKeyword = '';
				this.businesses = [];
				this.showResultTip = false;
			},
			
			// 获取搜索结果
			async fetchSearchResult() {
				this.loading = true;
				try {
					const response = await axios.get('/api/businesses/search', {
						params: {
							keyword: this.searchKeyword.trim()
						}
					});
					
					if (response.data.success) {
						this.businesses = response.data.data || [];
						this.showResultTip = true;
					} else {
						alert('搜索失败: ' + (response.data.message || '未知错误'));
						this.businesses = [];
					}
				} catch (error) {
					console.error('搜索接口请求出错:', error);
					alert('请求失败，请稍后重试');
					this.businesses = [];
				} finally {
					this.loading = false;
				}
			},
			
			// 改变排序类型
			changeSortType(type) {
				this.sortType = type;
				// 这里可以添加排序逻辑
			},
			
			// 跳转到商家详情
			goToBusinessDetail(businessId) {
				this.$router.push({
					path: '/businessInfo',
					query: { businessId: businessId }
				});
			},
			
			// 返回首页
			goBack() {
				this.$router.push('/');
			}
		}
	}
</script>
<style scoped>
	.search-result-page {
		width: 100%;
		max-width: 750px;
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 14vw;
		margin: 0 auto;
		box-sizing: border-box;
	}
	
	.wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: 750px;
		z-index: 100;
	}
	/* 固定搜索框样式 - 修复居中问题：使用margin: 0 auto实现居中 */
	.search-fixed {
		width: 100%;
		max-width: 750px;
		height: 13vw;
		background: #0097FF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 100;
		box-sizing: border-box;
		padding: 0 3vw;
	}
	/* 搜索输入框样式 - 修复右移问题：使用更稳定的布局方式 */
	.search-input-box {
		width: 100%;
		max-width: 680px;
		height: 9vw;
		background-color: #fff;
		border-radius: 4.5vw;
		display: flex;
		align-items: center;
		padding: 0 2.5vw;
		position: relative;
		box-sizing: border-box;
	}
	.search-input-box i.fa-search {
		color: #AEAEAE;
		font-size: 4vw;
		margin-right: 2vw;
		flex-shrink: 0;
	}
	.search-input-box input {
		flex: 1;
		height: 95%;
		border: none;
		padding: 0 1.5vw;
		outline: none;
		font-size: 3.5vw;
		color: #333;
		min-width: 0;
		/* 移除max-width限制，使用flex布局自动分配空间 */
	}
	
	.clear-btn {
		width: 4vw;
		height: 4vw;
		border: none;
		background: none;
		color: #999;
		font-size: 4vw;
		cursor: pointer;
		flex-shrink: 0;
		margin: 0 1vw;
	}
	.search-btn {
		background-color: #0078D4;
		color: white;
		border: none;
		border-radius: 2vw;
		padding: 1vw 3vw;
		font-size: 3.2vw;
		margin-left: 1.5vw;
		cursor: pointer;
		min-width: 18vw;
		flex-shrink: 0;
		white-space: nowrap; /* 防止按钮文字换行 */
	}
	/* 搜索结果提示 */
	.search-result-tip {
		width: 100%;
		padding: 3vw 4vw;
		background-color: #f0f7ff;
		font-size: 3.5vw;
		color: #0097FF;
		margin-top: 13vw;
		border-bottom: 1px solid #e6f2ff;
	}
	/* 排序方式 */
	.sort-container {
		width: 100%;
		background: white;
		position: sticky;
		top: 13vw;
		z-index: 90;
		border-bottom: 1px solid #f0f0f0;
	}
	.sort-type {
		width: 100%;
		height: 12vw;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.sort-type li {
		font-size: 3.8vw;
		color: #666;
		display: flex;
		align-items: center;
		padding: 2vw 3vw;
		cursor: pointer;
	}
	.sort-type li.active {
		color: #0097FF;
		font-weight: 500;
	}
	.sort-type li i {
		margin-left: 1vw;
		font-size: 3.5vw;
	}
	/* 商家列表容器 */
	.business-list-container {
		padding: 0 3vw;
		box-sizing: border-box;
	}
	/* 商家列表样式 */
	.business-list {
		width: 100%;
	}
	.business-list li {
		width: 100%;
		background: white;
		border-radius: 3vw;
		padding: 4vw;
		margin-bottom: 3vw;
		border: 1px solid #f0f0f0;
		display: flex;
		cursor: pointer;
		box-sizing: border-box;
	}
	.business-image {
		position: relative;
		margin-right: 4vw;
		flex-shrink: 0;
	}
	.business-image img {
		width: 22vw;
		height: 22vw;
		border-radius: 2vw;
		object-fit: cover;
	}
	.business-tag {
		position: absolute;
		top: 1vw;
		left: 1vw;
		background: #FA541C;
		color: white;
		font-size: 2.5vw;
		padding: 0.5vw 1.5vw;
		border-radius: 1vw;
	}
	.business-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.business-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2vw;
	}
	.business-header h3 {
		font-size: 4.5vw;
		color: #333;
		font-weight: 600;
		margin: 0;
	}
	.like-icon {
		color: #ccc;
		font-size: 4.5vw;
	}
	.like-icon.active {
		color: #FF4757;
	}
	.rating-info {
		margin-bottom: 2.5vw;
	}
	.stars {
		display: flex;
		align-items: center;
	}
	.stars i {
		color: #FFB800;
		font-size: 3.2vw;
		margin-right: 0.5vw;
	}
	.rating-text {
		font-size: 3.5vw;
		color: #FFB800;
		font-weight: 600;
		margin: 0 1.5vw 0 2vw;
	}
	.sales-text {
		font-size: 3.2vw;
		color: #666;
	}
	.delivery-info {
		display: flex;
		align-items: center;
		margin-bottom: 2.5vw;
		font-size: 3.2vw;
		color: #666;
	}
	.divider {
		margin: 0 2vw;
		color: #ddd;
	}
	.business-tags {
		margin-bottom: 2.5vw;
	}
	.tag {
		display: inline-block;
		background: #f0f7ff;
		color: #0097FF;
		font-size: 2.8vw;
		padding: 0.5vw 1.5vw;
		border-radius: 1vw;
	}
	.promotion-info {
		display: flex;
		align-items: center;
		background: #fff9f0;
		padding: 2vw;
		border-radius: 1.5vw;
	}
	.promotion-badge {
		background: #FA541C;
		color: white;
		font-size: 2.5vw;
		padding: 0.5vw 1vw;
		border-radius: 0.5vw;
		margin-right: 2vw;
	}
	.promotion-text {
		flex: 1;
		font-size: 3.2vw;
		color: #FA541C;
		margin: 0;
	}
	.promotion-more {
		display: flex;
		align-items: center;
		color: #999;
		font-size: 3vw;
	}
	.promotion-more i {
		margin-left: 1vw;
	}
	/* 加载和无结果样式 */
	.loading {
		width: 100%;
		height: 40vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #666;
		font-size: 3.8vw;
	}
	.spinner {
		width: 8vw;
		height: 8vw;
		border: 1vw solid #f0f0f0;
		border-top: 1vw solid #0097FF;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 3vw;
	}
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	.no-result {
		width: 100%;
		height: 60vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #999;
		font-size: 3.8vw;
	}
	.no-result-icon {
		width: 20vw;
		height: 20vw;
		background: #f0f0f0;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 4vw;
	}
	.no-result-icon i {
		font-size: 8vw;
		color: #ccc;
	}
	.no-result button {
		margin-top: 5vw;
		background: #0097FF;
		color: white;
		border: none;
		border-radius: 4vw;
		padding: 2.5vw 6vw;
		font-size: 3.5vw;
		cursor: pointer;
	}
	/* 响应式调整 */
	@media screen and (min-width: 750px) {
		.search-result-page,
		.search-fixed,
		.wrapper {
			font-size: 16px;
		}
		
		.search-fixed,
		.sort-container,
		.business-list-container {
			padding-left: 20px;
			padding-right: 20px;
		}
		
		.search-input-box {
			width: 100%;
			max-width: 680px;
			height: 54px;
		}
		
		.search-btn {
			min-width: 120px;
			height: 36px;
			font-size: 16px;
		}
		
		.search-fixed {
			height: 78px;
		}
	}
</style>